<template>
  <div>
    <div style="overflow:hidden;">
      <div style="height: 180px;width: 240px; float: left;padding-top:10px;padding-bottom: 10px;padding-right: 10px;">
        <div style="background: #FFFFFF" v-if="activityView.activityLogo === ''"></div>
        <el-image :src="mediaHost + activityView.activityLogo" fit="cover" v-else>
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <div style="height: 180px;width:1000px; float: left;padding-top:10px;padding-bottom: 10px;padding-right: 10px;">
        <div style="height:50px;font-size: 30px;">{{ activityView.activityName }}
          <el-tag size="mini" v-if="activityView.activityType === 1">前端开发</el-tag>
          <el-tag size="mini" v-else-if="activityView.activityType === 2">后端开发</el-tag>
          <el-tag size="mini" v-else-if="activityView.activityType === 3">移动开发</el-tag>
          <el-tag size="mini" v-else-if="activityView.activityType === 4">前沿技术</el-tag>
          <el-tag size="mini" v-else-if="activityView.activityType === 5">运维技术</el-tag>
          <el-tag size="mini" v-else-if="activityView.activityType === 6">测试技术</el-tag>
          <el-tag size="mini" v-else>其他技术</el-tag>
        </div>
        <div style="overflow: hidden; height: 60px;">
          <div>
            <div style="float: left;">
              <el-avatar :size="50" :src="this.$global.mediaHost + this.activityView.teacherAvatarUrl"></el-avatar>
            </div>
            <div style="float: left; margin-top: 18px; margin-left: 10px;">
              {{ this.activityView.creator }}
            </div>
            <div style="float: left; margin-top: 18px; margin-left: 10px;">
              于{{ this.activityView.createTimeStr }}开课
            </div>
            <div style="float: left; margin-top: 18px; margin-left: 10px;">
              截至目前为止有{{ this.activityView.authNum }}人在学
            </div>
          </div>
        </div>
        <div style="height: 40px;font-size: small">课程描述：{{ activityView.activityDesc }}</div>
        <div v-if="activityView.hasActivityPower=== false">
          <el-button :type="activityView.hasAuth === true ? 'danger':'primary'"
                     @click="activityView.hasAuth === true ? quit():authActivity()" size="mini">
            {{ activityView.hasAuth === true ? '退出课程' : '立即报名' }}
          </el-button>
          <el-button v-show="activityView.hasAuth=== true" type="success" size="mini" @click="abilityDetail()">课件类型
          </el-button>
        </div>
        <div v-else>
          <el-tag type="warning" size="medium">课程属于当前团队</el-tag>
        </div>
      </div>
    </div>
    <!--推荐课件-->
    <div v-show="activityView.hasAuth=== true && activityView.hasAbility === true">
      <el-table style="width: 100%" :data="recommendActivityContentList
                .filter(data => !recommendSearch || data.contentName.toLowerCase().includes(recommendSearch.toLowerCase()))">
        <el-table-column label="强烈推荐">
          <el-table-column prop="contentName" label="课件名称"></el-table-column>
          <el-table-column prop="contentLevel" label="课件等级">
            <template slot-scope="scope">
              <span v-if="scope.row.contentLevel === 1">初级</span>
              <span v-else-if="scope.row.contentLevel === 2">中级</span>
              <span v-else>高级</span>
            </template>
          </el-table-column>
          <el-table-column prop="contentType" label="课件类型">
            <template slot-scope="scope">
              <span v-if="scope.row.contentType === 1">图片</span>
              <span v-else-if="scope.row.contentType === 2">视频</span>
              <span v-else>PDF</span>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="mediaView.mediaUrl" label="课件地址" width="500px">-->
          <!--            <template slot-scope="scope">-->
          <!--              <span>{{ mediaHost + scope.row.mediaView.mediaUrl }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="recommendSearch"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini" @click="addBrowseRecord(scope.row.activityContentId, scope.row.hasBrowse)">
                <el-link :underline="false" target="_blank" :href="mediaHost + scope.row.mediaView.mediaUrl">
                  {{ scope.row.hasBrowse === true ? '已经学习' : '立即学习' }}
                </el-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <!--全部课件-->
    <div style="margin-top: 20px;">
      <el-table style="width: 100%" :data="activityContentList
                .filter(data => !search || data.contentName.toLowerCase().includes(search.toLowerCase()))">
        <el-table-column label="全部列表">
          <el-table-column prop="contentName" label="课件名称"></el-table-column>
          <el-table-column prop="contentLevel" label="课件等级">
            <template slot-scope="scope">
              <span v-if="scope.row.contentLevel === 1">初级</span>
              <span v-else-if="scope.row.contentLevel === 2">中级</span>
              <span v-else>高级</span>
            </template>
          </el-table-column>
          <el-table-column prop="contentType" label="课件类型">
            <template slot-scope="scope">
              <span v-if="scope.row.contentType === 1">图片</span>
              <span v-else-if="scope.row.contentType === 2">视频</span>
              <span v-else>PDF</span>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini" @click="addBrowseRecord(scope.row.activityContentId, scope.row.hasBrowse)">
                <el-link :underline="false" target="_blank" :href="mediaHost + scope.row.mediaView.mediaUrl">
                  {{ activityView.hasActivityPower === true ? '查看课件' : scope.row.hasBrowse === true ? '已经学习' : '立即学习' }}
                </el-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <!--添加标签-->
    <el-dialog title="设置您在此门课程的标签" :visible.sync="dialogFormVisible" width="30%" :before-close="closeDialog"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="userAbilityView">
        <el-form-item label="您对此门课程的认知程度">
          <el-radio-group v-model="userAbilityView.contentLevel">
            <el-radio :label="1">刚刚入门</el-radio>
            <el-radio :label="2">稍有了解</el-radio>
            <el-radio :label="3">比较熟悉</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择你喜欢的学习方式">
          <el-radio-group v-model="userAbilityView.contentType">
            <el-radio :label="2">视频</el-radio>
            <el-radio :label="3">PDF</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" :disabled="userAbilityView.contentLevel === '' || userAbilityView.contentType === '' "
                   @click="saveOrUpdateAbility()">确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StudyValue",
  props: ['activityId'],
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      indexPage: this.$global.indexPage,
      timer: '',
      activityView: {
        creator: '',
        activityName: '',
        activityType: '',
        activityLogo: '',
        activityDesc: '',
        teacherAvatarUrl: this.$global.avatarDefault,
        createTimeStr: '',
        authNum: '',
        hasAbility: false,
        hasAuth: false,
        hasActivityPower: false
      },
      paramsData: {
        activityId: '',
        contentLevel: '',
        contentType: ''
      },
      userAbilityView: {
        activityId: '',
        contentLevel: '',
        contentType: ''
      },
      recommendSearch: '',
      recommendActivityContentList: [],
      search: '',
      requestFlag: true,
      activityContentList: [],
      dialogFormVisible: false
    }
  },
  methods: {
    /**
     *
     * 班级详情
     * */
    detail: function () {
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/detail',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.activityView = responseData.activityView
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 报名
     */
    authActivity: function () {
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/auth/authActivity',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "报名成功",
            center: true,
            duration: 1000
          });
          this.detail();
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 退出课程
     */
    quit: function () {
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/auth/quit',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "退出课程成功",
            center: true,
            duration: 1000
          });
          this.detail();
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 更新自己对对此门课程的标签
     */
    saveOrUpdateAbility: function () {
      this.dialogFormVisible = false
      this.paramsData.activityId = this.activityId
      this.paramsData.contentLevel = this.userAbilityView.contentLevel
      this.paramsData.contentType = this.userAbilityView.contentType
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/user/ability/saveOrUpdateAbility',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "修改标签成功",
            center: true,
            duration: 1000
          });
          this.detail();
          this.getRecommendActivityContentList();
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 更新自己对对此门课程的标签
     */
    abilityDetail: function () {
      this.dialogFormVisible = true
      if (this.activityView.hasAbility === true) {
        this.paramsData.activityId = this.activityId
        this.$ajax({
          method: 'post',
          headers: this.$global.headers,
          url: this.$global.host + '/v1/user/ability/abilityDetail',
          data: JSON.stringify({
            "data": this.paramsData,
            "user": this.$global.getUser(),
            "teamId": this.$global.getTeamId()
          }),
        }).then(response => {
          const responseData = response.data.data;
          const responseState = response.data.state
          if (2000 === responseState.code) {
            this.userAbilityView = responseData.userAbilityView
          } else {
            this.$message.error({
              message: responseState.msg,
              center: true,
              duration: 1000
            });
          }
        }).catch(function (err) {
          console.log(err)
        })
      }
    },
    /**
     *获得推荐课件列表
     *
     */
    getRecommendActivityContentList: function () {
      this.paramsData.activityId = this.activityId
      this.paramsData.hasStudent = true
      this.paramsData.page = this.$global.indexPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/content/activityContentList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.recommendActivityContentList = responseData.pageData.data
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *获得全部课件列表
     *
     */
    getActivityContentList: function () {
      this.requestFlag = false
      this.paramsData.activityId = this.activityId
      this.paramsData.hasStudent = false
      this.paramsData.page = this.indexPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/content/activityContentList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.activityContentList = this.activityContentList.concat(responseData.pageData.data)
          this.indexPage = responseData.pageData.page
          this.indexPage.page += 1
          this.requestFlag = true
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *添加浏览记录
     *
     */
    addBrowseRecord: function (activityContentId, hasBrowse) {
      if (this.activityView.hasActivityPower === false && hasBrowse === false) {
        this.paramsData.activityId = this.activityId
        this.paramsData.activityContentId = activityContentId
        console.log(this.paramsData)
        this.$ajax({
          method: 'post',
          headers: this.$global.headers,
          url: this.$global.host + '/v1/activity/content/browse/record/addBrowseRecord',
          data: JSON.stringify({
            "data": this.paramsData,
            "user": this.$global.getUser(),
            "teamId": this.$global.getTeamId()
          }),
        }).then(response => {
          const responseData = response.data.data;
          const responseState = response.data.state
          if (2000 === responseState.code) {

          } else {
            this.$message.error({
              message: responseState.msg,
              center: true,
              duration: 1000
            });
          }
        }).catch(function (err) {
          console.log(err)
        })
      }
    },
    /**
     *
     * 判断能否继续调用
     */
    canGetActivityContentList() {
      if (this.requestFlag === true && this.indexPage.page > 1 && this.indexPage.hasMore === false) {
        clearInterval(this.timer);
      }
      if (this.requestFlag === true && (this.indexPage.page === 1 || this.indexPage.hasMore === true)) {
        this.getActivityContentList();
      }
    },
    closeDialog: function (done) {
      this.closeDialogDeleteData()
      done();
    },
    cancel: function () {
      this.dialogFormVisible = false
      this.closeDialogDeleteData()
    },
    closeDialogDeleteData: function () {
      this.userAbilityView.activityId = ''
      this.userAbilityView.contentLevel = ''
      this.userAbilityView.contentType = ''
    }
  },
  mounted() {
    this.timer = setInterval(this.canGetActivityContentList, 1000);
  },
  created() {
    this.detail()
    this.getRecommendActivityContentList()
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style scoped>

</style>
